<template>
<v-container>
  <v-row class="green mt-n3">
    <v-col>
      <v-btn :to="{name:'Myself'}" class="mx-2" elevation=0 fab outlined x-small color="white">
        <v-icon color="white">mdi-keyboard-backspace</v-icon>
      </v-btn>
    </v-col>
    <v-col>
      <h3 class="d-flex justify-center">优 惠 券</h3>
    </v-col>
    <v-col></v-col>
  </v-row>
  <v-row>
    <v-bottom-navigation :value="activeBtn1" height="40px" grow color="teal">
      <v-btn @click="active=1">
        <span>可使用</span>
      </v-btn>
      <v-btn @click="active=2">
        <span>已使用</span>
      </v-btn>
      <v-btn @click="active=3">
        <span>已过期</span>
      </v-btn>
    </v-bottom-navigation>
  </v-row>

  <v-container v-show="active==1">
    <!-- <v-row> -->
    <v-col
      v-for="card in cards1"
      :key="card.id"
      :cols="card.flex"
    >
        <v-row>
          <v-card flat>
            <v-img
              :src="card.src"
              height="150px"
              contain
            >
            <div style="position:relative;top:40px;left:20px;">￥</div>
            <div style="position:relative;top:16px;left:35px;">105</div>
            <div style="position:relative;top:18px;left:10px;height:40px;width:65px;text-align:center;">满1000可用</div>
            <div style="position:relative;top:-48px;left:90px;">2020年11月22日</div>
            <div style="position:relative;top:-43px;left:115px;">--2020年11月25日</div>
            <div style="position:relative;top:-30px;left:160px;">仅可用于数码产品</div>
            <!-- <span style="position:relative;top:40px;left:40px;"></span>
            <span style="position:relative;top:40px;left:40px;"></span>
            <span style="position:relative;top:40px;left:40px;"></span> -->
            <!-- <span v-text="card.title" style="position:relative;top:40px;left:40px;"></span> -->
            </v-img>
          </v-card>
          </v-row>
        </v-col>
        <!-- </v-row> -->
  </v-container>
  <v-container v-show="active==2">
    <v-col
          v-for="card in cards2"
          :key="card.id"
          :cols="card.flex"
        >
        <v-row>
          <v-card flat disabled>
            <v-img
              :src="card.src"
              height="150px"
              contain
            >
            <div style="position:relative;top:40px;left:20px;">￥</div>
            <div style="position:relative;top:16px;left:35px;">105</div>
            <div style="position:relative;top:18px;left:10px;height:40px;width:65px;text-align:center;">满1000可用</div>
            <div style="position:relative;top:-48px;left:90px;">2020年11月22日</div>
            <div style="position:relative;top:-43px;left:115px;">--2020年11月25日</div>
            <div style="position:relative;top:-30px;left:160px;">仅可用于数码产品</div>
            </v-img>
          </v-card>
          </v-row>
        </v-col>
  </v-container>
  <v-container v-show="active==3">
    <v-col
          v-for="card in cards3"
          :key="card.id"
          :cols="card.flex"
        >
        <v-row>
          <v-card flat disabled>
            <v-img
              :src="card.src"
              height="150px"
              contain
            >
            <div style="position:relative;top:40px;left:30px;">9折</div>
            <div style="position:relative;top:40px;left:10px;height:40px;width:65px;text-align:center;">满1000可用</div>
            <div style="position:relative;top:-25px;left:90px;">2020年1月22日</div>
            <div style="position:relative;top:-20px;left:115px;">--2020年1月25日</div>
            <div style="position:relative;top:-10px;left:160px;">仅可用于数码产品</div>
            </v-img>
          </v-card>
          </v-row>
        </v-col>
  </v-container>

  <!-- 去掉底部Banner的遮挡 -->
  <v-row>
    <span style="display:inline-block;width:100%;height:44px;"></span>
  </v-row>

<v-bottom-navigation style="position:fixed;" :value="activeBtn2" grow color="teal">
      <v-btn :to="{name:'Mall'}" bottom>
        <span>首页</span>
        <v-icon>mdi-home</v-icon>
      </v-btn>
      <v-btn :to="{name:'Classify'}">
        <span>分类</span>
        <v-icon>mdi-widgets</v-icon>
      </v-btn>
      <v-btn :to="{name:'Myself'}">
        <span>我的</span>
        <v-icon>person</v-icon>
      </v-btn>
    </v-bottom-navigation>

</v-container>
</template>

<script>
export default {
  data () {
    return {
      activeBtn1: 0,
      active:1,
      activeBtn2: 2,
      cards1:[
        {id:1, title: '八折', src: require('../assets/优惠券未使用.jpg'), flex: 12},
        {id:2, title: '8折', src: require('../assets/优惠券未使用.jpg'), flex: 12},
        {id:3, title: 'Pre-fab homes 3', src: require('../assets/优惠券未使用.jpg'), flex: 12},
        {id:4, title: 'Pre-fab homes 4', src: require('../assets/优惠券未使用.jpg'), flex: 12},
      ],
      cards2:[
        {id:5, title: 'Favorite road trips 1', src: require('../assets/优惠券已使用.jpg'), flex: 12},
        {id:6, title: 'Favorite road trips 2', src: require('../assets/优惠券已使用.jpg'), flex: 12},
      ],
      cards3:[
        {id:7, title: 'Best airlines 1', src: require('../assets/优惠券已过期.jpg'), flex: 12},
        {id:8, title: 'Best airlines 2', src: require('../assets/优惠券已过期.jpg'), flex: 12},
        {id:9, title: 'Best airlines 3', src: require('../assets/优惠券已过期.jpg'), flex: 12},
        {id:10, title: 'Best airlines 4', src: require('../assets/优惠券已过期.jpg'), flex: 12},
      ],
    }
  },
}
</script>

<style scoped>
</style>